<template>
    <div class="songlist-container">

        <!-- Tag -->
        <TagsCombo @update:selectedTag="updatePageTitle" />

        <!-- Songlist -->
        <Songlist :title="songlistTitle" />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import TagsCombo from '@/components/songlist/Tag/TagsCombo.vue';
import Songlist from '@/components/songlist/Songlist/Songlist.vue';

const pageTitle = ref('全部歌单');
const updatePageTitle = (tagInfo) => {
  pageTitle.value = tagInfo.text || '全部歌单';
  // 传递给 Songlist.vue
  songlistTitle.value = tagInfo.text || '全部歌单';
};

const songlistTitle = ref('全部歌单');
</script>

<style>
.songlist-container {
    padding: 20px;
    min-width: 1200px;
}
</style>